<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>${category.name} | 北京时间</title> 
        
		<link rel="stylesheet" type="text/css" href="${baseurl}resource/slideshow/css/style.css" />
		<link rel="stylesheet" type="text/css" href="${baseurl}resource/slideshow/css/elastislide.css" />
		 <link rel="shortcut icon" href="${baseurl}resource/imgs/icon.png" >
		<noscript>
			<style>
				.es-carousel ul{
					display:block;
				}
			</style>
		</noscript>
		<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">	
			<div class="rg-image-wrapper">
				{{if itemsCount > 1}}
					<div class="rg-image-nav">
						<a href="#" class="rg-image-nav-prev">Previous Image</a>
						<a href="#" class="rg-image-nav-next">Next Image</a>
					</div>
				{{/if}}
				<div class="rg-image"></div>
				<div class="rg-loading"></div>
				<div class="rg-caption-wrapper">
					<div class="rg-caption" style="display:none;">
						<p></p>
					</div>
				</div>
			</div>
		</script>
    </head>
    <body>
		<div class="container">
		  <!-- header -->
<div >
<a href="${baseurl}index.html"><img src="${baseurl}resource/imgs/logo.png" width="200px"/></a>${category.name}@看世界

</div>
	  <div class="content">
				
				<div id="rg-gallery" class="rg-gallery">
				
					<div class="rg-thumbs">
						<!-- Elastislide Carousel Thumbnail Viewer -->
						<div class="es-carousel-wrapper">
							<div class="es-nav">
								<span class="es-nav-prev">Previous</span>
								<span class="es-nav-next">Next</span>
							</div>
							<div class="es-carousel">
								<ul>
								<c:forEach items="${items}" var="it" varStatus="s">
									<li><a href="#"><img src="${it.thumb}" data-large="${it.url}" alt="${it.name}" data-description="${it.digest}" /></a></li>
								</c:forEach>	
								</ul>
							</div>
						</div>
						<!-- End Elastislide Carousel Thumbnail Viewer -->
					</div><!-- rg-thumbs -->
				</div><!-- rg-gallery -->

			</div><!-- content -->
		</div><!-- container -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript" src="${baseurl}resource/slideshow/js/jquery.tmpl.min.js"></script>
		<script type="text/javascript" src="${baseurl}resource/slideshow/js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="${baseurl}resource/slideshow/js/jquery.elastislide.js"></script>
		<script type="text/javascript" src="${baseurl}resource/slideshow/js/gallery.js"></script>
    </body>
</html>